<template>
<!--用户修改-->
  <div id="user_manage">
    <el-button @click="$router.push('/adduser')">添加用户</el-button>
    <el-table
        :data="userList"
        style="width: 100%">
      <el-table-column
          prop="username"
          label="用户名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="password"
          label="用户密码"
          width="180">
      </el-table-column>
      <el-table-column
          prop="cover"
          label="用户头像">
        <template slot-scope="scope">
          <img class="book_cover" :src="scope.row.avatar">
        </template>
      </el-table-column>
      <el-table-column
          prop="author"
          label="操作">
        <template slot-scope="scope">
          <el-button @click="updateBtn(scope)" type="primary">更新</el-button>
          <el-button @click="removeUser(scope)" type="warning">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="更新用户"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <el-form ref="form" :model="newUserObj" label-width="80px" label-position="top">
        <el-form-item label="新密码">
          <el-input v-model="newUserObj.password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input v-model="newUserObj.againPassword"></el-input>
        </el-form-item>
        <el-form-item label="更新头像">
          <el-upload
              class="avatar-uploader"
              :action="`${baseUrl}/api/image/uploadImage`"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
            <img v-if="newUserObj.avatar" :src="newUserObj.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUser">确定更新</el-button>
        <el-button @click="centerDialogVisible = false">取消更新</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import baseUrl from "../../const/baseUrl";
import {getAllUser,deleteUserById,updateUser} from "../../network/userApi";

export default {
  name: "UserManage",
  data(){
    return{
      baseUrl,
      userList:[],
      centerDialogVisible: false,
      newUserObj:{},
    }
  },
  created() {
    getAllUser().then((result)=>{
      console.log(result);
      this.userList=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    });
  },
  methods:{
    //单击更新按钮时
    updateBtn(data){
      console.log(data);
      this.centerDialogVisible=true;
      // updateUser()
      //使用浅拷贝
      this.newUserObj=Object.assign({},data.row);
      // this.newUserObj=data.row;
    },
    //确定更新按钮
    updateUser(){
      console.log(this.newUserObj);
      if (this.newUserObj.password===this.newUserObj.againPassword) {
        updateUser(this.newUserObj).then((result) => {
          console.log(result);
          if (result.data.code === 200) {
            this.$message({
              message: '更新成功!',
              type: 'success'
            });
            sessionStorage.setItem("wlj-url", "/usermanage");
            this.$router.push("/blankpage");
          } else {
            this.$message({
              message: '更新失败!',
              type: 'warning'
            });
          }
        })
      }else{
        this.$message({
          message: '两次密码失败!',
          type: 'warning'
        });
      }
    },
    removeUser(data){
      deleteUserById(data.row.id).then((result)=>{
        console.log(result);
        if (result.data.code===200){
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          sessionStorage.setItem("wlj-url","/usermanage");
          this.$router.push("/blankpage");
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    },
    //头像上传成功
    handleAvatarSuccess(res){
      this.newUserObj.avatar=res.data;
    }
  }
}
</script>

<style scoped>
.book_cover{
  height: 150px;
}
.avatar{
  height: 150px;
}
</style>
